<template>
  <div class="appearance-panel">
    <div class="appearance-item">
      <div class="header">布局</div>
      <div class="content">
        <div @click="clickTheme(theme)" class="theme" :class="{selected : theme.selected}" v-for="theme in layouts" :key="theme.value">
          <component :is="theme.component" />
          <span>{{theme.name}}</span>
        </div>
      </div>
    </div>
    <div class="appearance-item">
      <div class="header">侧边栏</div>
      <div class="sidebar">
        <div class="sidebar-item" v-for="item in sidebars" :key="item.name">
          <span>{{item.name}}</span>
          <component :min="200" :max="320" @change="(value: CheckedType) => onChange(value , item)" v-model:checked="item.value" v-model:value="item.value" :is="item.component" />
        </div>
      </div>
    </div>
    <div class="appearance-item">
      <div class="header">面包屑导航</div>
      <div class="sidebar">
        <div class="sidebar-item" v-for="item in breadcrumbs" :key="item.name">
          <span>{{item.name}}</span>
          <component option-type="button" button-style="solid" :options="[{label : '常规' , value : 'normal'} , {label : '背景' , value : 'background'}]" @change="(value: CheckedType) => onChangeBreadcrumb(value , item)" v-model:checked="item.value" v-model:value="item.value" :is="item.component" />
        </div>
      </div>
    </div>
    <div class="appearance-item">
      <div class="header">标签栏</div>
      <div class="sidebar">
        <div class="sidebar-item" v-for="item in tabbars" :key="item.name">
          <span>{{item.name}}</span>
          <component :options="tabbarStyleOptions" @change="(value: CheckedType) => onChangeTabbar(value , item)" v-model:checked="item.value" v-model:value="item.value" :is="item.component" />
        </div>
      </div>
    </div>
  </div>
</template>

<script lang='ts' setup>
import { ref, shallowRef, watchEffect, type Component } from 'vue';
import VerticalIcon from './VerticalIcon.vue';
import HorizontalIcon from './HorizontalIcon.vue';
import SidebarIcon from './SidebarIcon.vue';
import MixedIcon from './MixedIcon.vue';
import { useConfigStore } from '@/stores/configs/config';
import { storeToRefs } from 'pinia';
import type { BreadcrumbStyleType, LayoutType, TabbarStyleType } from '@/stores/configs/types';
import { InputNumber, RadioGroup, Select, Switch } from 'ant-design-vue';
type CheckedType = boolean | string | number;
const configStore = useConfigStore();
const { config } = storeToRefs(configStore);
type LayoutItem = {
  name: string;
  value: LayoutType;
  component: Component;
  selected: boolean;
}
type SidebarItem = {
  name: string;
  value: CheckedType;
  component: Component;
}
type BreadcrumbItem = {
  name: string;
  value: BreadcrumbStyleType | boolean;
  component: Component;
}
type TabbarItem = {
  name: string;
  value: CheckedType;
  component: Component;
}
const tabbarStyleOptions = ref([
  { label : '朴素' , value : 'plain' },
  { label : '卡片' , value : 'card' }
])
const layouts = ref<LayoutItem[]>([
  {name : '垂直导航' , value : 'sidebar-nav' , component : shallowRef(VerticalIcon) , selected: true},
  {name : '水平导航' , value : 'header-nav' , component : shallowRef(HorizontalIcon) , selected : false},
  {name : '侧边导航' , value : 'header-sidebar-nav' , component : shallowRef(SidebarIcon) , selected : false},
  {name : '混合导航' , value : 'mixed-nav' , component : shallowRef(MixedIcon) , selected : false}
]);
const sidebars = ref<SidebarItem[]>([
  { name : '显示侧边栏' , value : config.value.sidebar.enable , component : shallowRef(Switch) },
  { name : '折叠菜单' , value : config.value.sidebar.collapsed , component : shallowRef(Switch) },
  { name : '侧边栏宽度' , value : 240 , component : shallowRef(InputNumber) }
]);
const breadcrumbs = ref<BreadcrumbItem[]>([
  { name : '开启面包屑导航' , value : config.value.breadcrumb.enable , component : shallowRef(Switch) },
  { name : '显示面包屑导航图标' , value : config.value.breadcrumb.showIcon , component : shallowRef(Switch) },
  { name : '显示面包屑导航主页图标' , value : config.value.breadcrumb.showHome , component : shallowRef(Switch) },
  { name : '面包屑导航风格' , value : config.value.breadcrumb.style ,  component : shallowRef(RadioGroup) }
]);
const tabbars = ref<TabbarItem[]>([
  { name : '开启标签栏' , value : config.value.tabbar.enable , component : shallowRef(Switch) },
  { name : '启动拖拽排序' , value : config.value.tabbar.draggable , component : shallowRef(Switch) },
  { name : '显示更多按钮' , value : config.value.tabbar.showMore , component : shallowRef(Switch) },
  { name : '显示最大化按钮' , value : config.value.tabbar.showFullscreen , component : shallowRef(Switch) },
  { name : '显示标签栏图标' , value : config.value.tabbar.showIcon , component : shallowRef(Switch) },
  { name : '是否开启页面缓存' , value : config.value.tabbar.keepAlive , component : shallowRef(Switch) },
  { name : '标签栏风格' , value : config.value.tabbar.style , component : shallowRef(Select) }
]);
const clickTheme = (theme: LayoutItem) => {
  layouts.value.forEach(item => {
    item.selected = false;
  })
  theme.selected = true;
  configStore.updateConfig({
    app : {
      layout : theme.value
    }
  })
}
watchEffect(() => {
  layouts.value.forEach(item => {
    item.selected = false;
    if (item.value === config.value.app.layout) {
      item.selected = true;
    }
  });
});
const onChange = (value: CheckedType , data: SidebarItem) => {
  if (data.name === '显示侧边栏') {
    configStore.updateConfig({
      sidebar : {
        enable : value as boolean
      }
    })
  } else if (data.name === '折叠菜单') {
    configStore.updateConfig({
      sidebar : {
        collapsed : value as boolean
      }
    });
  } else if (data.name === '侧边栏宽度') {
    configStore.updateConfig({
      sidebar : {
        width : Number(value)
      }
    })
  }
}
const onChangeBreadcrumb = (value: CheckedType , data: BreadcrumbItem) => {
  if (data.name === '开启面包屑导航') {
    configStore.updateConfig({
      breadcrumb : {
        enable : value as boolean
      }
    })
  } else if (data.name === '显示面包屑导航图标') {
    configStore.updateConfig({
      breadcrumb : {
        showIcon : value as boolean
      }
    })
  } else if (data.name === '显示面包屑导航主页图标') {
    configStore.updateConfig({
      breadcrumb : {
        showHome : value as boolean
      }
    })
  } else if (data.name === '面包屑导航风格') {
    configStore.updateConfig({
      breadcrumb : {
        style : data.value as BreadcrumbStyleType
      }
    })
  }
}
const onChangeTabbar = (value: CheckedType , data: TabbarItem) => {
  if (data.name === '开启标签栏') {
    configStore.updateConfig({
      tabbar : {
        enable : value as boolean
      }
    })
  } else if (data.name === '启动拖拽排序') {
    configStore.updateConfig({
      tabbar : {
        draggable : value as boolean
      }
    })
  } else if (data.name === '显示更多按钮') {
    configStore.updateConfig({
      tabbar : {
        showMore : value as boolean
      }
    })
  } else if (data.name === '显示最大化按钮') {
    configStore.updateConfig({
      tabbar : {
        showFullscreen : value as boolean
      }
    })
  } else if (data.name === '显示标签栏图标') {
    configStore.updateConfig({
      tabbar : {
        showIcon : value as boolean
      }
    })
  } else if (data.name === '标签栏风格') {
    configStore.updateConfig({
      tabbar : {
        style : data.value as TabbarStyleType
      }
    })
  } else if (data.name === '是否开启页面缓存') {
    configStore.updateConfig({
      tabbar : {
        keepAlive : data.value as boolean
      }
    })
  }
}
</script>

<style lang='less' scoped>
.appearance-panel {
  display: flex;
  flex-flow: column;
  height: 100%;
  width: 100%;
  gap: 0.16rem;
  .appearance-item {
    display: flex;
    flex-flow: column;
    .header {
      margin-bottom: 0.1rem;
      height: 0.32rem;
      line-height: 0.32rem;
      display: flex;
      align-items: center;
      font-size: var(--font-size-medium);
      font-weight: 500;
    }
    .content {
      display: flex;
      flex-wrap: wrap;
      gap: 0.24rem;
      .theme {
        flex: 1;
        border-radius: var(--radius);
        display: flex;
        flex-flow: column;
        gap: 0.1rem;
        align-items: center;
        justify-content: center;
        padding: 0.16rem;
        cursor: pointer;
        transition: all 0.3s;
        border: 0.01rem solid;
        .useTheme({
          border-color: border-color;
          background-color: white-color;
        });
        &:hover {
          .useTheme({
            background-color: primary-color;
            color: white-color;
          } , 0.8)
        }
        &.selected {
          .useTheme({
            background-color: primary-color;
            color: white-color;
          });
        }
      }
    }
    .sidebar {
      display: flex;
      flex-flow: column;
      gap: 0.16rem;
      .sidebar-item {
        display: flex;
        justify-content: space-between;
      }
    }
  }
}
</style>